<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">充值</block>
		</cu-custom>

		<view class="tc bg-white pt50" style="padding-bottom: 50rpx;">
			<view class="fs26 fw600">充值金额</view>
			<view class="fs66 ff"><text v-text="recharge.OrderMoney"></text><text class="fs26">元</text></view>
			<view class="fs26 text-muted" style="margin-top: -10rpx;" v-text="CompanyName"></view>
		</view>

		<view class="mt20">
			<view class="qui-cells">
				<view class="qui-cells-title">
					<text class="fs30 text-default">选择付款方式</text>
					<text class="text-muted fs26">（转账至该账户）</text>
				</view>
				<view class="qui-cells-tips plr30">
					<view class="flex flex-center justify-between mb15">
						<view class="btn-1 flex flex-center justify-center" :class="{active:recharge.PayWay==item.PayWay}" v-for="(item,index) in items"
						 @tap="recharge.PayWay=item.PayWay;show(item.PayWay)">
							<view>
								<img :src="imgurl+item.url" alt="">
							</view>
							<text class="ml10">{{item.text}}</text>
						</view>
					</view>
					<view class="bg-1 radius10 padding" v-if="BankPay!=null && recharge.PayWay==3">
						<view class="flex align-center mb20">
							<view class="uni-label">
								<text class="text-muted fs26">收款人</text>
							</view>
							<view class="flex-1">
								<text class="fs26 fw600 text-default" v-text="BankPay.NickName"></text>
							</view>
						</view>
						<view class="flex align-center mb20">
							<view class="uni-label">
								<text class="text-muted fs26">收款银行</text>
							</view>
							<view class="flex-1">
								<text class="fs26 fw600 text-default" v-text="BankPay.Zhihang"></text>
							</view>
						</view>
						<view class="flex align-center">
							<view class="uni-label">
								<text class="text-muted fs26">银行卡号</text>
							</view>
							<view class="flex-1">
								<text class="fs26 fw600 text-default"  v-text="BankPay.Account"></text>
							</view>
						</view>
					</view>
					<view class="bg-1 radius10 padding" v-if="Alipay !=null && recharge.PayWay==1">
						<view class="flex align-center" v-on:tap="ViewImage1(ImgDomain+Alipay.QrCode)">
							<view style="line-height: 0;">
								<image :src="ImgDomain+Alipay.QrCode" mode="" class="img168"></image>
							</view>
							<view class="flex-1 ml20">
								<view class="mb5">
									<view class="text-muted fs24">支付宝帐号</view>
									<view class="text-default fs26 fw600" v-text="Alipay.Account"></view>
								</view>
								<view>
									<view class="text-muted fs24">昵称</view>
									<view class="text-default fs26 fw600" v-text="Alipay.NickName"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="bg-1 radius10 padding"v-if="WxPay !=null && recharge.PayWay==2">
						<view class="flex align-center">
							<view style="line-height: 0;" v-on:tap="ViewImage1(ImgDomain+WxPay.QrCode)">
								<image :src="ImgDomain+WxPay.QrCode" mode="" class="img168"></image>
							</view>
							<view class="flex-1 ml20">
								<view class="mb5">
									<view class="text-muted fs24">微信帐号</view>
									<view class="text-default fs26 fw600" v-text="WxPay.Account"></view>
								</view>
								<view>
									<view class="text-muted fs24">昵称</view>
									<view class="text-default fs26 fw600" v-text="WxPay.NickName"></view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex align-center ptb20">
						<view>
							<image :src="imgurl+'icon_error.png'" mode="" class="img30" style="vertical-align: sub;"></image>
						</view>
						<view class="ml10">
							<text class="fs26" style="color: #171717;">{{tips}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qui-cells mt20">
			<view class="qui-cells-title">
				<text class="fs30 text-default">转账信息</text>
			</view>
			<view class="qui-cells-tips">
				<view class="qui-cell" style="padding-top: 0px;align-items: end;">
					<view class="uni-label">
						<text class="fs26 text-muted">打款凭证</text>
					</view>
					<view class="cell-bd">
						<view class="flex" style="align-items: end;">
							<view class="bg-img"   @tap="ViewImage" v-if="recharge.PayImg!=''">
								<image :src="ImgDomain+recharge.PayImg" class="img123"></image>
								<view class="icon_delete" @tap.stop="DelImg" >
									<image :src="imgurl+'icon_delete.png'" alt="">
								</view>
							</view>
							<view class="file-box" @tap="upload" v-if="recharge.PayImg==''">
								<image :src="imgurl+'icon_add01.png'" alt="">
							</view>
						</view>
					</view>
				</view>
				<view class="qui-cell no-before-none">
					<view class="uni-label">
						<text class="fs26 text-muted">备注</text>
					</view>
					<view class="cell-bd">
						<input type="text" class="qui-input" placeholder="输入备注信息" v-model="recharge.Remark" placeholder-class="text-muted fs26">
					</view>
				</view>
			</view>
		</view>

					
		<view  class="uni-btns text-bold" v-on:tap="Recharge">
			<button class="bg-main radio uni-btn fs30">确认支付</button>
		</view>

	</view>
</template>

<script>
	import base from 'utils/base.js';
	import tools from 'utils/tools.js';
	export default {
		data() {
			return {
				Alipay:null,
				WxPay:null,
				BankPay:null,
				tips:"",
				CompanyName:"",
				imgurl: this.$imgurl,
				recharge:{PayWay:0,OrderMoney:0,Remark:"",PayImg:""},
				activeIndex: 0,
				items: [],
				imgList: [],
				ImgDomain:""

			}
		},
		onLoad(options) {
		let	_self = this;
			_self.recharge.OrderMoney = options.money;
					let globalData = getApp().globalData;
					_self.CompanyName=globalData.Customer.Name;
					_self.ImgDomain=globalData.ImgDomain;
		
		},
		mounted() {
			this.GetShouKuanSetList();
		},
		methods: {
			Recharge:function(){
				let currentPage = this;
				if(currentPage.recharge.PayWay<=0)
				{
					tools.showToast("请选择支付方式");
					return;
				}
				
				if(currentPage.recharge.PayImg=='')
				{
					tools.showToast("请上传支付凭证");
					return;
				}
				if(currentPage.recharge.PayWay==1) currentPage.recharge.PayWay=3;
				else if(currentPage.recharge.PayWay==2) currentPage.recharge.PayWay=4;
				else if(currentPage.recharge.PayWay==3) currentPage.recharge.PayWay=5;
				let params = {
					type: 'POST',
					url: '/api/Recharge/RechargeOffline',
					data: currentPage.recharge,
					sCallback: function(response) {
						if (response.IsSuccess) {
							
							uni.redirectTo({
							    url: '/pages/my/rechargeDetail?nav=1&BusinessID='+response.Data
							});
							
						} else {
							
								tools.showToast(response.msg);
								
							
						}
					}
				};
				base.request(params);
			},
			upload:function(){
					let currentPage = this;
				let globalData = getApp().globalData;
				uni.chooseImage({
					sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						
						let uploadurl=globalData.UploadDomain+'/Baidu/AliyunUpload';
						uni.showLoading({
							title: '上传中',
							mask: true
						});
				        uni.uploadFile({
				            url: uploadurl,
				            filePath: tempFilePaths[0],
				            name: 'file2',
				            formData: {
				                'imageType': 0,
								'imageSize':0,
								'customerid':globalData.Customer.CustID,
								'userid':globalData.UserInfo.UserID,
								'isWeixin':0
				            },
				            success: (uploadFileRes) => {
							uni.hideLoading();
								var d=JSON.parse(uploadFileRes.data)
								currentPage.recharge.PayImg=d.dataUrl;
				               
				            },
							fail:function(chooseImageRes){
								uni.hideLoading();
								tools.showToast(JSON.stringify(chooseImageRes));
							}
				        });
				    },
					fail:function(chooseImageRes){
						tools.showToast(JSON.stringify(chooseImageRes));
					}
				});
			},
			
			show:function(paytype)
			{
				let currentPage = this;
				if(paytype==1)
				{
					currentPage.tips=currentPage.Alipay.Tips;
				}else if(paytype==2)
				{
					currentPage.tips=currentPage.WxPay.Tips;
				}else if(paytype==3)
				{
					currentPage.tips=currentPage.BankPay.Tips;
				}
			},
			GetShouKuanSetList:function(){
				let currentPage = this;
				let globalData = getApp().globalData;
				let params = {
					type: 'GET',
					url: '/api/Recharge/GetShouKuanSetList',
					data: {},
					sCallback: function(response) {
						if (response.IsSuccess) {
							
							currentPage.Alipay=response.Data.Alipay;
							currentPage.WxPay=response.Data.WxPay;
							currentPage.BankPay=response.Data.BankPay;
							if(currentPage.WxPay!=null) {
								currentPage.recharge.PayWay=currentPage.WxPay.Type;
								currentPage.tips=currentPage.WxPay.Tips;
								let info={
							    	url: 'icon_bank_3.png',
							      text: '微信',
							        	num: '',
							      	PayWay:2
							          };
														currentPage.items.push(info);
							}
							
							 if(currentPage.Alipay!=null){
								 	currentPage.tips=currentPage.Alipay.Tips;
								currentPage.recharge.PayWay=currentPage.Alipay.Type;
								let info={
						       url: 'icon_bank_2.png',
						     text: '支付宝',
						         num: '',
						       PayWay:1
					         };
											currentPage.items.push(info);
							} 
								
								
								if(currentPage.BankPay!=null) {
										currentPage.tips=currentPage.BankPay.Tips;
											currentPage.recharge.PayWay=currentPage.BankPay.Type;
											let info={
									         url: 'icon_bank_1.png',
									        text: '银行卡',
									          num: '',
									       PayWay:3
								};
											currentPage.items.push(info);
											
										} 
							
						} else {
							uni.showToast({
								title: response.Msg
							});
						}
					}
				};
				base.request(params);
			},
			ViewImage(e) {
				let currentPage = this;
				let list=new Array();
				list.push(currentPage.ImgDomain+currentPage.recharge.PayImg);
				uni.previewImage({
					urls:list,
					current: currentPage.ImgDomain+currentPage.recharge.PayImg
				});
			},
			ViewImage1(url) {
			
				let list=new Array();
				list.push(url);
				uni.previewImage({
					urls:list,
					current: url
				});
			},
			DelImg(e) {
				let currentPage = this;
				uni.showModal({
					title: '提示',
					content: '确定删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							currentPage.recharge.PayImg='';
						}
					}
				})
			}
		},


	}
</script>

<style lang="scss" scoped>
	.bg-img {
		position: relative;
		margin-right: 20upx;
	}
	.icon_delete {
			width: 35upx;
			height: 35upx;
			position: absolute;
			right: -15upx;
			top: -15upx;
			image {
				width: 35upx;
				height: 35upx;
			}
	}
	.img123 {
		width: 123upx;
			height: 123upx;
				border-radius: 5px;
				border: 1px solid #EEEEEE;
	}
	.file-box {
		width: 123upx;
			height: 123upx;
			background-image: linear-gradient(
				#f3f3f3, 
				#f3f3f3), 
			linear-gradient(
				#ffffff, 
				#ffffff);
			background-blend-mode: normal, 
				normal;
			border-radius: 5upx;
			text-align: center;
			line-height: 123upx;
			image {
				width: 27upx;
				height: 27upx;
			}
	}
	.bg-1 {
		background-color: #f8f8f8;
	}
	.img168 {
		width: 168upx;
		height: 168upx;
		
	}
	.btn-1 {
		width: 215upx;
		height: 70upx;
		background-color: #f8f8f8;
		border-radius: 5upx;
		line-height: 70upx;
		text-align: center;
		border: 1px solid #f8f8f8;

		img {
			width: 45upx;
			height: 30upx;
			vertical-align: text-bottom;
		}

		&.active {
			border-color: #ff5e1f;
		}
	}

	.fs66 {
		font-size: 66rpx;
	}


	.img74 {
		width: 74rpx;
		height: 74rpx;
	}


	.img36 {
		width: 36rpx;
		height: 36rpx;
	}
</style>
